<template>
  <view class="flex-col page">
    <view class="flex-col">
      <view class="flex-row justify-between self-stretch group_3">
        <text class="font_2 text_6 tab_active">全部</text>
        <text class="font_3 text_6">待付款</text>

        <view class="font_3 text_6">
          待发货
          <text class="text_10 pos">3</text>
        </view>
        <text class="font_3 text_6">待收货</text>
        <text class="font_3 text_6">待评价</text>
      </view>
      <view class="self-start section"></view>
      <view class="flex-col self-stretch list">
        <view
          class="flex-col list-item section_2 mt-13"
          v-for="(item, index) in 3"
          :key="index"
        >
          <view class="flex-row justify-between items-center group_5">
            <text class="font_4 text_12">JT000066666</text>
            <view class="flex-row group_6">
              <text class="font_5 text_13">订单关闭</text>
              <image
                class="ml-2 shrink-0 image_5"
                src="../../static/wx/right.png"
                
              />
            </view>
          </view>
          <view class="flex-col group_7">
            <view class="imgs">
            <image
              class="self-start image_6"
              src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png"
              
            /><image
              class="self-start image_6"
              src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png"
              
            /><image
              class="self-start image_6"
              src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png"
              
            /><image
              class="self-start image_6"
              src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png"
              
            /><image
              class="self-start image_6"
              src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png"
              
            /><image
              class="self-start image_6"
              src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png"
              
            /><image
              class="self-start image_6"
              src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png"
              
            /><image
              class="self-start image_6"
              src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png"
              
            /></view>
            <view class="mt-4 self-end group_8">
              <text class="font_2">共2件商品</text>
              <text class="font_2 text_14">合计：</text>
              <text class="font_6">￥69.3</text>
            </view>
          </view>
          <view class="flex-row group_9">
            <text class="font_7">2025-03.24</text>
            <text class="ml-8 font_7">20:50:51</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },

  methods: {},
};
</script>

<style scoped lang="css">
/* @import "@/static/jd/base.scss"; */
.ml-5 {
  margin-left: 10rpx;
}
.mt-13 {
  margin-top: 26rpx;
}
.page {
  padding: 36rpx 30rpx 50rpx 30rpx;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding-left: 12rpx;
}
.group_2 {
  line-height: 20.7rpx;
  height: 20.7rpx;
}
.font {
  font-size: 28rpx;
  font-family: SF Pro Text;
  line-height: 20.74rpx;
  font-weight: 600;
  color: #000000;
}
.text {
  word-break: break-all;
}
.text_2 {
  line-height: 20.7rpx;
}
.text_3 {
  line-height: 19.72rpx;
}
.image {
  width: 34rpx;
  height: 22rpx;
}
.image_2 {
  width: 30rpx;
  height: 22rpx;
}
.image_3 {
  width: 48rpx;
  height: 22.66rpx;
}
.image_4 {
  width: 48rpx;
  height: 44rpx;
}
.text_4 {
  color: #000000;
  font-size: 40rpx;
  font-family: Laila;
  font-weight: 700;
  line-height: 37.72rpx;
}
.group_3 {
  margin-top: 10rpx;
  padding: 0 12rpx;
}
.font_2 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 25.78rpx;
  color: #2d3142;
}

.font_3 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 25.78rpx;
  font-weight: 600;
  color: #9c9db9;
}
.text_6 {
  line-height: 26.38rpx;
  position: relative;
  padding-bottom: 10rpx;
}
.group_4 {
  margin-right: 20rpx;
}
.text_7 {
  line-height: 26.58rpx;
}
.text_10 {
  color: #ffffff;
  font-size: 24rpx;
  font-family: Mukta;
  font-weight: 600;
  line-height: 15.6rpx;
}
.pos {
  background-color: #e22b2b;
  border-radius: 50%;
  width: 30rpx;
  height: 30rpx;
  text-align: center;
  line-height: 30rpx;
  position: absolute;
  top: 0;
  right: -40rpx;
}

.text_11 {
  color: #ffffff;
  font-size: 24rpx;
  font-family: Lexend;
  line-height: 17.04rpx;
}
.text_8 {
  margin-left: 20rpx;
  line-height: 26.62rpx;
}
.text_9 {
  margin-left: 48rpx;
  line-height: 26.48rpx;
}

.list {
  padding: 20rpx 2rpx 0;
}
.list-item {
  margin-right: 26rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.section_2 {
  padding:0 32rpx 32rpx;
  background-color: #f7f8fc;
  border-radius: 32rpx;
  width: 100%;
  box-sizing: border-box;
}
.group_5 {
  padding: 36rpx 0 16rpx;
  border-bottom: solid 2rpx #e6e9f1;
}
.font_4 {
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 25.78rpx;
  color: #2d3142;
}
.text_12 {
  line-height: 25.4rpx;
}
.group_6 {
  margin-right: 12rpx;
}
.font_5 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 25.78rpx;
  color: #9c9eb9;
}
.text_13 {
  line-height: 25.82rpx;
}
.image_5 {
  width: 12rpx;
  height: 24rpx;
  margin: 0 5rpx 0 15rpx;
}
.group_7 {
  margin-top: 28rpx;
}
.group_8 {
  line-height: 29.2rpx;
}
.text_14 {
  margin-left: 16rpx;
}
.font_6 {
  font-size: 40rpx;
  font-family: Mukta;
  line-height: 29.2rpx;
  color: #e22b2b;
}
.group_9 {
  margin-top: 40rpx;
}
.image_6 {
  width: 136rpx;
  height: 158rpx;
}
.font_7 {
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 20.74rpx;
  color: #2d3142;
}

.tab_active {
  color: #f08000;
  font-weight: 700;
  line-height: 26.44rpx;
  border-bottom: 4rpx solid  #ff841b;
}
.imgs{
  display: flex;
  flex-wrap:wrap;
  width: 100%;
}
.imgs image{
  margin-right: 20rpx;
  display: inline-block;
}
</style>
